<template>
  <el-row :gutter="20">
    <el-col :span="24">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span style="float: left;color: red">注：最多8个热搜词</span>
        </div>
        <div v-for="(d,index) in hotStringList" :key="d.id" class="text item">
          <IconDel :text="d.word" :id="d.id" :index="index" :del-icon="delHotString"/>
        </div>
        <el-col :span="24">
          <el-col :span="13">
            <el-input v-model="text" placeholder="请填写热搜词"></el-input>
          </el-col>
          <el-col :span="6">
            <el-button type="primary" @click="addString">{{$t('action.submit')}}</el-button>
          </el-col>
        </el-col>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
  import IconDel from "@/components/IconDel";

  export default {
    name: "index",
    components: {IconDel},
    data() {
      return {
        hotStringList: [],
        text: '',
      }
    },
    created() {
      this.getHotStringList();
    },
    methods: {
      getHotStringList() {
        this.$api.mall.getHotStringList().then(
          res => {
            this.hotStringList = res.data.list
          }
        )
      },
      addString() {
        if (!this.text) {
          this.$message({
            type: 'warning',
            message: '请填写热搜词'
          });
          return;
        }
        this.$api.mall.saveHotString({text: this.text}).then(
          res => {
            this.hotStringList.push({
              word: this.text,
              id: res.data.id
            })
            this.$message({
              type: 'success',
              message: '添加热搜词成功'
            });
          }
        )
      },
      delHotString(id, index) {
        this.$confirm('此操作将永久删除该热搜词, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.hotStringList.splice(index, 1)
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
    },
  }
</script>

<style lang="scss" scoped>
  .box-card > > > .el-card__body {
    overflow: hidden;
  }

  .text {
    font-size: 14px;
    float: left;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }
</style>
